<template>
  <div class="data-manage">
    <common-Form
        :fieldsList="aaaField"
        :hideTable="false"
        :table-head="firstTableHead"
        :hidePagination="false"
        ref="precisePreventManage"
        :defaultData="defaultData"
        :tableHeight="70000"
        :tableUrl="'/list/precise_warn_list'"
    >
      <template v-slot:formBtn>
        <div style="text-align: right;width: 100%;">
          <el-button type="primary" size="mini" @click="handleQuery">搜索</el-button>
        </div>

        <el-button
            type="primary"
            icon="el-icon-upload2"
            size="mini"
            @click="handleImport"
            style="margin-left: 20px"
        >导入</el-button>
        <el-popover
          icon="el-icon-info"
          icon-color="red"
          placement="right"
        >
          <div>
            <el-date-picker
              v-model="exportDate"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="-"
              placeholder="请选择日期"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div style="margin-top: 10px;text-align: right">
            <el-button size="mini" type="primary" @click="handleExport">导出</el-button>
          </div>
          <el-button
            type="primary"
            icon="el-icon-download"
            size="mini"
            style="margin-left: 20px"
            slot="reference"
          >导出</el-button>
        </el-popover>

        <el-popover
          icon="el-icon-info"
          icon-color="red"
          placement="right"
        >
          <div>
            <el-date-picker
              v-model="deleteDate"
              type="datetimerange"
              value-format="yyyy-MM-dd HH:mm:ss"
              range-separator="-"
              placeholder="请选择日期"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </div>
          <div style="margin-top: 10px;text-align: right">
            <el-button size="mini" type="danger" @click="handleDelete">删除</el-button>
          </div>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            style="margin-left: 20px"
            slot="reference"
          >删除</el-button>
        </el-popover>

      </template>

<!--      <template v-slot:edit="scope" >
        <div>
          <span class="table-btn"  style="color: #3DE11D;font-size: 40px"
                @click="detail(scope.scope.$index, scope.scope.row)"><i class="el-icon-chat-dot-round">宣传方式</i></span>
        </div>
      </template>-->

    </common-Form>
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
      <el-upload
          ref="upload"
          :limit="1"
          accept=".xlsx, .xls"
          :action="upload.url + '?updateSupport=' + upload.updateSupport"
          :disabled="upload.isUploading"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :auto-upload="false"
          drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <span>仅允许导入xls、xlsx格式文件。</span>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import commonDialog from '@/components/commonDialog/common.dialog'
import commonForm from '@/components/commonForm/commonForm.component'
import API from "@/api/index.api";
import _ from "lodash";
import * as request from '@/utils/request/request'
import Publicize from "@/components/customComponents/PublicizeDialog.component.vue";
import Api from "@/api/index.api";

export default {
  name: 'precisePreventManage',
  components: {
    commonForm,
  },
  data () {
      return {
        exportDate: [],
        deleteDate: [],
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
        /*  headers: { Authorization: "Bearer " + getToken() },*/
          // 上传的地址
          url: request.baseURL + "/list/importPreciseWarnData"
        },
        aaaField: [
          {
            type: 'text',
            code:'keyWord'
          },

        ],
        firstTableHead: [
          {
            prop: 'phonenum',
            label: '手机号码'
          },
          {
            prop: 'name',
            label: '姓名'
          },
          {
            prop: 'idcard',
            label: '身份证'
          },
          {
            prop: 'type',
            label: '类型'
          },
          {
            prop: 'idcard',
            label: '身份证号'
          },
          {
            prop: 'data_source',
            label: '数据源'
          },
          {
            prop: 'station',
            label: '出警单位'
          },
          {
            prop: 'warn_time',
            label: '预警时间'
          },
          // {
          //   prop: 'edit',
          //   label: '操作'
          // },
        ],
        defaultData: [
          {
            'phonenum': '反诈中心',
            'name': '18326521220',
            'second_type': '林丽柳',
            'channel': '拦截',
            'warn_time': '2024-02-15 08：30：56',
            'station': '互联网  ',
            'address': '互联网  ',
          }]

      }
  },
  methods: {
    handleExport () {
      if (this.exportDate && this.exportDate.length) {
        Api.exportPreciseWarnData(this.exportDate)
      }
    },
    handleDelete () {
      if (this.deleteDate && this.deleteDate.length) {
        this.$confirm('确认删除？')
          .then(()=> {
            Api.delete_precise_warn_list(this.deleteDate).then((res)=>{
              this.$alert(res.msg);
            })
          })
      }
    },
    handleQuery() {
       let params = _.clone(this.$refs.precisePreventManage.form)
       this.$refs.precisePreventManage.getTableData(params)
    },
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload.clearFiles();
      this.$alert("导入成功");
      this.$refs.precisePreventManage.getTableData()
    },
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleImport() {
      this.upload.title = "被害人导入";
      this.upload.open = true;
    },

  },
  mounted () {
    //this.getWarnList()
  }
}
</script>
<style lang="stylus">
  .data-manage{
    height: 100%;
    pointer-events: auto;
    .common-form-wrap {
      height: 100%;
    }
  }
</style>
